<template>
<div id="app">
  <TodoHeader @handleAddTask="addTask"></TodoHeader>
  <TodoMain :list="list" @handleDelTask="delTask"></TodoMain>
  <TodoFooter :list="list" @handleClearAll="clearAll"></TodoFooter>
</div>
</template>

<script>
import TodoHeader from "@/components/TodoHeader.vue";
import TodoMain from "@/components/TodoMain.vue";
import TodoFooter from "@/components/TodoFooter.vue";
//渲染功能
//1.提供数据 ➞ 提供在公共的父组件App.vue中
//2.通过父传子，将数据传递给TodoMain.vue
//3.利用v-for渲染


//添加功能
//1.收集表单数据 ➞ v-model
//2.监听事件（回车 + 点击 都要进行添加）
//3.子传父，将任务名称传递给父组件App.vue
//4.进行添加 unshift (自己的数据自己负责)

//删除功能
//1.监听事件（监听删除的点击）携带id
//2.子传父，将删除的id传递给父组件App.vue
//3.进行删除 filter (自己的数据自己负责)

//底部合计：父传子 传list ➞ 渲染
//清空功能：子传父 通知到父组件 ➞ 父组件进行清空操作
export default {
  data() {
    return{
      list: [
        {id: 2, name: "我要吃饭"},
        {id: 1, name: "我要睡觉"}
      ]
    }
  },
  methods: {
    addTask(name) {
      let tempId;
      //生成一个不重复的id
      if (this.list[0] != null) {
        tempId = this.list[0].id + 1
      } else {
        tempId = 1
      }
      //添加
      this.list.unshift({
        id: tempId,
        name: name
      });
    },
    delTask(id) {
      this.list = this.list.filter(item => item.id != id);
    },
    clearAll() {
      this.list = [];
    }
  },
  components:{
    TodoHeader,
    TodoMain,
    TodoFooter
  }
}
</script>

<style>

</style>

